<template>
	<view class="forum-card-item" :class="isDark?'dark':''" @tap="item.isAds==1?goAds(item):goInfo(item.id)">
		<view class="forum-card-content">
			<!-- 封面图片区域 -->
			<view class="forum-card-cover" :style="coverStyle">
				<!-- 广告图片 -->
				<block v-if="item.isAds==1">
					<!-- #ifdef MP-WEIXIN -->
					<image :src="item.img" mode="aspectFill" @load="onImageLoad" style="width: 100%; border-radius: 20rpx;"></image>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<tn-lazy-load :image="item.img" mode="aspectFill" borderRadius="20" @load="onImageLoad"></tn-lazy-load>
					<!-- #endif -->
				</block>
				<!-- 普通帖子图片 -->
				<block v-else>
					<block v-if="item.images && item.images.length > 0 && item.sectionJson && item.sectionJson.slug != 'vip' && item.sectionJson.slug != 'lv4'">
						<!-- #ifdef MP-WEIXIN -->
						<image :src="item.images[0]" mode="aspectFill" @load="onImageLoad" style="width: 100%; border-radius: 20rpx;"></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<tn-lazy-load :image="item.images[0]" mode="aspectFill" borderRadius="20" @load="onImageLoad"></tn-lazy-load>
						<!-- #endif -->
					</block>
					<block v-else-if="item.videos && item.videos.length > 0 && item.sectionJson && item.sectionJson.slug != 'vip' && item.sectionJson.slug != 'lv4'">
						<view class="forum-card-video">
							<!-- #ifdef MP-WEIXIN -->
							<image :src="item.videos[0].poster" mode="aspectFill" @load="onImageLoad" style="width: 100%; border-radius: 20rpx;"></image>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<tn-lazy-load :image="item.videos[0].poster" mode="aspectFill" borderRadius="20" @load="onImageLoad"></tn-lazy-load>
							<!-- #endif -->
							<view class="video-play-icon">
								<text class="cuIcon-playfill"></text>
							</view>
						</view>
					</block>
					<block v-else-if="item.sectionJson && item.sectionJson.slug == 'vip'">
						<!-- #ifdef MP-WEIXIN -->
						<image src="../../static/page/vip_img.png" mode="aspectFill" @load="onImageLoad" style="width: 100%; border-radius: 20rpx;"></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<tn-lazy-load image="../../static/page/vip_img.png" mode="aspectFill" borderRadius="20" @load="onImageLoad"></tn-lazy-load>
						<!-- #endif -->
					</block>
					<block v-else-if="item.sectionJson && item.sectionJson.slug == 'lv4'">
						<!-- #ifdef MP-WEIXIN -->
						<image src="../../static/page/lv_img.png" mode="aspectFill" @load="onImageLoad" style="width: 100%; border-radius: 20rpx;"></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<tn-lazy-load image="../../static/page/lv_img.png" mode="aspectFill" borderRadius="20" @load="onImageLoad"></tn-lazy-load>
						<!-- #endif -->
					</block>
					<block v-else>
						<!-- 默认占位图 -->
						<view class="forum-card-placeholder">
							<text class="tn-icon-image"></text>
						</view>
					</block>
				</block>
				
				<!-- 标签区域 -->
				<view class="forum-card-tags">
					<!-- 广告标签 -->
					<view class="forum-card-tag forum-card-tag--ad" v-if="item.isAds==1">
						<text class="tn-icon-sponsor"></text>
						<text>{{$t('global.advert')}}</text>
					</view>
					<block v-else>
						<view class="forum-card-tag" v-if="item.isTop==2">
							<text class="tn-icon-pushpin"></text>
							<text>{{$t('global.top')}}</text>
						</view>
						<view class="forum-card-tag forum-card-tag--recommend" v-else-if="item.isrecommend==1&&item.sectionJson&&item.sectionJson.slug != 'vip'&&item.isTop!=2">
							<text class="tn-icon-fire"></text>
							<text>{{$t('global.essence')}}</text>
						</view>
						<view class="forum-card-tag forum-card-tag--vip" v-else-if="item.sectionJson&&item.sectionJson.slug == 'vip'">
							<text class="tn-icon-vip-diamond"></text>
							<text>{{$t('global.vip')}}</text>
						</view>
						<view class="forum-card-tag forum-card-tag--lv4" v-else-if="item.sectionJson&&item.sectionJson.slug == 'lv4'">
							<text class="tn-icon-vip"></text>
							<text>{{$t('comp.forumcarditem.fourlevel')}}</text>
						</view>
					</block>
				</view>
			</view>
			
			<!-- 标题区域 -->
			<view class="forum-card-title">
				<!-- 广告标题 -->
				<block v-if="item.isAds==1">
					{{item.name || ''}}
				</block>
				<!-- 普通帖子标题 -->
				<block v-else>
					{{item.title || ''}}
				</block>
			</view>
			
			<!-- 底部信息区域 -->
			<view class="forum-card-footer">
				<!-- 广告描述或用户信息 -->
				<block v-if="item.isAds==1">
					<view class="forum-card-ad-intro">
						{{item.intro || ''}}
					</view>
				</block>
				<block v-else>
					<!-- 用户信息 -->
					<view class="forum-card-user" @tap.stop="toUserContents(item.userJson)" v-if="item.userJson">
						<view class="user-avatar-container">
							<view class="user-avatar" :style="{ backgroundImage: 'url(' + (item.userJson.avatar || '') + ')' }"></view>
							<image class="user-rz-icon" :src="rzImg" v-if="item.userJson.lvrz==1" mode="aspectFill"></image>
						</view>
						<view class="user-name" :class="item.userJson.isvip>0?'name-vip':''">
							{{item.userJson.name || ''}}
						</view>
					</view>
					
					<!-- 统计信息（可选显示其中一种） -->
					<view class="forum-card-stats">
						<block v-if="showType === 'views'">
							<text class="tn-icon-eye"></text>
							<text class="stats-text">{{item.views}}</text>
						</block>
						<block v-else-if="showType === 'comments'">
							<text class="tn-icon-comment"></text>
							<text class="stats-text">{{item.commentsNum}}</text>
						</block>
						<block v-else-if="showType === 'likes'">
							<text class="tn-icon-like-lack"></text>
							<text class="stats-text">{{item.likes}}</text>
						</block>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import darkModeMixin from '@/utils/darkModeMixin.js'
	import {
		localStorage
	} from '../../js_sdk/mp-storage/mp-storage/index.js'
	
	export default {
		mixins: [darkModeMixin],
		props: {
			item: {
				type: Object,
				default: () => ({
					id: '',
					title: '',
					images: [],
					videos: [],
					sectionJson: {
						slug: ''
					},
					userJson: {
						name: '',
						avatar: '',
						uid: '',
						lvrz: 0,
						isvip: 0
					},
					isTop: 0,
					isrecommend: 0,
					views: 0,
					commentsNum: 0,
					likes: 0,
					// 广告相关字段
					isAds: 0,
					name: '',
					intro: '',
					img: '',
					url: '',
					urltype: 0
				})
			},
			showType: {
				type: String,
				default: 'views', // views, comments, likes
				validator: function (value) {
					return ['views', 'comments', 'likes'].indexOf(value) !== -1
				}
			}
		},
		name: "forumCardItem",
		data() {
			return {
				rzImg: this.$API.SPRz(),
				imageHeight: 250, // 默认高度
				isImageLoaded: false
			};
		},
		computed: {
			coverStyle() {
				if (this.isImageLoaded&&this.imageHeight>480) {
					return {
						height: this.imageHeight-40 + 'upx'
					};
				}else{
					return {
						height: this.imageHeight + 'upx'
					};
				}
				return {
					height: '250upx' // 默认高度
				};
			}
		},
		mounted() {
			// 如果有图片，预加载获取尺寸
			this.preloadImage();
		},
		methods: {
			goInfo(id) {
				var that = this;
				if (!id) return; // 如果id为undefined或null，直接返回
				
				uni.navigateTo({
					url: '/pages/forum/info?id=' + id
				});
			},
			goAds(data) {
				var that = this;
				var url = data.url;
				var type = data.urltype;
				// #ifdef APP-PLUS
				if (type == 1) {
					plus.runtime.openURL(url);
				}
				if (type == 0) {
					plus.runtime.openWeb(url);
				}
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
			},
			toUserContents(data) {
				var that = this;
				if (!data) return; // 如果data为undefined或null，直接返回
				
				var name = data.name || '';
				var title = (data.name || '') + that.$t('common.nameinfo');
				var id = data.uid || '';
				var type = "user";
				uni.navigateTo({
					url: '/pages/contents/userinfo?title=' + title + "&name=" + name + "&uid=" + id + "&avatar=" +
						encodeURIComponent(data.avatar || '')
				});
			},
			preloadImage() {
				const that = this;
				let imageUrl = '';
				
				// 确定要预加载的图片URL
				if (that.item && that.item.isAds == 1) {
					// 广告图片
					imageUrl = that.item.img;
				} else if (that.item && that.item.images && that.item.sectionJson && that.item.images.length > 0 && that.item.sectionJson.slug != 'vip' && that.item.sectionJson.slug != 'lv4') {
					imageUrl = that.item.images[0];
				} else if (that.item && that.item.videos && that.item.videos.length > 0 && that.item.sectionJson && that.item.sectionJson.slug != 'vip' && that.item.sectionJson.slug != 'lv4') {
					imageUrl = that.item.videos[0].poster;
				} else if (that.item && that.item.sectionJson && that.item.sectionJson.slug == 'vip') {
					imageUrl = '../../static/page/vip_img.png';
				} else if (that.item && that.item.sectionJson && that.item.sectionJson.slug == 'lv4') {
					imageUrl = '../../static/page/lv_img.png';
				}
				
				if (imageUrl) {
					// 创建临时图片对象获取原始尺寸
					// #ifdef H5
					const img = new Image();
					img.onload = function() {
						that.calculateImageHeight(img.naturalWidth, img.naturalHeight);
					};
					img.onerror = function() {
						that.isImageLoaded = true; // 加载失败也要显示默认高度
					};
					img.src = imageUrl;
					// #endif
					
					// #ifdef APP-PLUS || MP
					uni.getImageInfo({
						src: imageUrl,
						success: function(res) {
							that.calculateImageHeight(res.width, res.height);
						},
						fail: function() {
							that.isImageLoaded = true; // 加载失败也要显示默认高度
						}
					});
					// #endif
				} else {
					that.isImageLoaded = true;
				}
			},
			calculateImageHeight(width, height) {
				const that = this;
				const cardWidth = 335; // 卡片宽度约335upx (750upx屏幕宽度 - 40upx边距 - 20upx间隙) / 2
				const minHeight = 200; // 最小高度
				const maxHeight = 500; // 最大高度
				
				// 根据图片比例计算高度
				let calculatedHeight = (height / width) * cardWidth;
				
				// 限制在最小和最大高度之间
				if (calculatedHeight < minHeight) {
					calculatedHeight = minHeight;
				} else if (calculatedHeight > maxHeight) {
					calculatedHeight = maxHeight;
				}
				
				that.imageHeight = Math.round(calculatedHeight);
				that.isImageLoaded = true;
			},
			onImageLoad() {
				// tn-lazy-load加载完成回调（如果需要的话）
			}
		}
	}
</script>

<style lang="scss" scoped>
	.forum-card-item {
		width: 100%;
		margin-bottom: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		overflow: hidden;
		box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.forum-card-item:active {
		transform: scale(0.98);
	}

	.forum-card-content {
		padding: 0;
	}

	/* 封面图片区域 */
	.forum-card-cover {
		position: relative;
		width: 100%;
		overflow: hidden;
		transition: height 0.3s ease;
	}

	.forum-card-video {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.video-play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80upx;
		height: 80upx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 40upx;
	}

	.forum-card-placeholder {
		width: 100%;
		height: 300upx;
		background: #d2d2d2;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 80upx;
	}

	/* 标签区域 */
	.forum-card-tags {
		position: absolute;
		top: 20upx;
		left: 20upx;
		z-index: 10;
	}

	.forum-card-tag {
		display: inline-flex;
		align-items: center;
		padding: 8upx 16upx;
		background: rgba(212, 0, 0, 0.9);
		color: white;
		border-radius: 20upx;
		font-size: 22upx;
		backdrop-filter: blur(10upx);
		
		text:first-child {
			margin-right: 4upx;
		}
		
		&--recommend {
			background: rgba(0, 188, 212, 0.9);
		}
		
		&--vip {
			background: rgba(223, 147, 25, 0.9);
		}
		
		&--lv4 {
			background: rgba(0, 183, 85, 0.9);
		}
		
		&--ad {
			background: rgba(255, 152, 0, 0.9);
		}
	}

	/* 标题区域 */
	.forum-card-title {
		padding: 20upx 20upx 16upx 20upx;
		font-size: 28upx;
		font-weight: 500;
		line-height: 1.4;
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	/* 底部信息区域 */
	.forum-card-footer {
		padding: 0 20upx 20upx 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 用户信息 */
	.forum-card-user {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.user-avatar-container {
		position: relative;
		width: 40upx;
		height: 40upx;
		margin-right: 12upx;
		flex-shrink: 0;
	}

	.user-avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border: 2upx solid white;
	}

	.user-rz-icon {
		position: absolute;
		right: -4upx;
		bottom: -4upx;
		width: 20upx;
		height: 20upx;
		z-index: 10;
		border-radius: 50%;
		background-color: white;
		padding: 2upx;
		box-sizing: border-box;
	}

	.user-name {
		font-size: 24upx;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.name-vip {
		color: #ff6c3e;
	}

	/* 统计信息 */
	.forum-card-stats {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 24upx;
		flex-shrink: 0;
		
		text:first-child {
			margin-right: 6upx;
			font-size: 28upx;
		}
	}

	.stats-text {
		font-size: 24upx;
	}
	
	/* 广告描述 */
	.forum-card-ad-intro {
		font-size: 24upx;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		max-width: 100%;
		width: 0; /* 配合flex使用，防止内容撑开容器 */
	}

	/* 深色模式适配 */
	.dark .forum-card-item {
		background: #2c2c2c;
	}

	.dark .forum-card-title {
		color: #ffffff;
	}

	.dark .user-name {
		color: #cccccc;
	}

	.dark .forum-card-stats {
		color: #999999;
	}

	.dark .forum-card-placeholder {
		background: #444;
	}
	
	.dark .forum-card-ad-intro {
		color: #cccccc;
	}
</style> 